import { addAddress, getAddressAll, updateAddress } from "@/services/address"
import { Form, Input, message, Modal, Select } from "antd"
import { useForm } from "antd/es/form/Form"
import { useEffect, useState } from "react"

interface AddressModalProps {
    isModalOpen: any;
    setIsModalOpen: (...args) => void;
    afterChange?: (...args) => void;
}

const AddressModal = ({ isModalOpen, setIsModalOpen, afterChange }: AddressModalProps) => {
    const [form] = useForm()

    const [province, setProvince] = useState<any>([]);
      const [city, setCity] = useState<any>([]);
      const [regional, setRegional] = useState<any>([]);
      
    const addAddressHandle = () => {
            form.validateFields().then((values) => {
                addAddress(values).then((res) => {
                    if (res.code === 200) {
                        setIsModalOpen(false)
                        message.success('新增成功')
                        afterChange && afterChange()
                        form.resetFields()
                    } else {
                        message.error(res.message)
                    }
                })
            })
      }

    const getAddressCityList = ({type, parentCode, num}) => {
        getAddressAll({
            type,
            parentCode
        }).then((res) => {
            if (res.code === 200 ) {
                if (num === 0) {
                    setProvince(res.data)
                } else if (num === 1) {
                    setCity(res.data)
                } else if (num === 2) {
                    setRegional(res.data)
                }
            }
        })
      }
    useEffect(() => {
        getAddressCityList({
            type: 'province',
            parentCode: '',
            num: 0,
        })
      }, [])
    return (
      <Modal 
        title={'新增'} 
        open={isModalOpen} onCancel={() => setIsModalOpen(false)} 
        onOk={addAddressHandle} 
        cancelText="取消" 
        okText="确定"
      >
        <Form
            form={form}
            name="basic"
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
            style={{ maxWidth: 600 }}
            initialValues={{ remember: true }}
            autoComplete="off"
        >
            <Form.Item
                label="收货人"
                name="recipientName"
                rules={[{ required: true, message: '请输入收货人姓名!' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="手机"
                name="recipientPhone"
                rules={[{ required: true, message: '请输入收货手机!' }, {
                    pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                    message: '手机号格式有误！',
                  }, ]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="省份"
                name="provinceCode"
                rules={[{ required: true, message: '请选择省份!' }]}
            >
                <Select fieldNames={{label: 'name', value: 'code'}} options={province} onChange={(value, option) => {
                    form.setFieldValue('provinceName', option?.name || '')
                    setRegional([])
                    form.setFieldsValue({
                        'cityCode': '',
                        'cityName': '',
                        'regionalCode': '',
                        'regionalName': ''
                    })
                    getAddressCityList({
                        type: 'city',
                        parentCode: value,
                        num: 1,
                    })
                }} />
            </Form.Item>
            <Form.Item
                label="城市"
                name="cityCode"
                rules={[{ required: true, message: '请选择城市!' }]}
            >
                <Select fieldNames={{label: 'name', value: 'code'}} options={city} onChange={(value, option) => {
                    form.setFieldValue('cityName', option?.name || '')
                    form.setFieldsValue({
                        'regionalCode': '',
                        'regionalName': ''
                    })
                    getAddressCityList({
                        type: 'regional',
                        parentCode: value,
                        num: 2,
                    })
                }} />
            </Form.Item>
            <Form.Item
                label="区县"
                name="regionalCode"
                rules={[{ required: true, message: '请选择区县!' }]}
            >
                <Select fieldNames={{label: 'name', value: 'code'}} options={regional} onChange={(value, option) => {
                    form.setFieldValue('regionalName', option?.name || '')
                }} />
            </Form.Item>
            <Form.Item
                label="详细地址"
                name="addressDetails"
                rules={[{ required: true, message: '请输入详细地址!' }]}
            >
                <Input.TextArea />
            </Form.Item>
            <Form.Item label="城市" name="provinceName" hidden></Form.Item>
            <Form.Item label="城市" name="cityName" hidden></Form.Item>
            <Form.Item label="城市" name="regionalName" hidden></Form.Item>
        </Form>
      </Modal>
    )
}

export default AddressModal;